<template>
    <div class="new-grid file-info">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" isFooter @onCancel="closeDialog">
            <template #content>
                <div class="grid-form">
                    <div class="device-area">
                        <div class="area-item">
                            <div class="form-item flex">
                                <div class="label">仿真类型:</div>
                                <pui-radio-group v-model="deviceManager.photGrid.grid_type" :list="componentRef.emulationTypeList"></pui-radio-group>
                            </div>
                        </div>
                        <div class="title">计算区域设置:</div>
                        <div class="area-item">
                            <div class="form-item">
                                <div class="label">横向x/μm</div>
                                <input type="text" class="pui-input" placeholder="横向x" v-model="deviceManager.photGrid.xLength" clearAble full/>
                            </div>
                            <div class="form-item">
                                <div class="label">横向y/μm</div>
                                <input type="text" class="pui-input" placeholder="横向y" v-model="deviceManager.photGrid.yLength" clearAble full/>
                            </div>
                            <div class="form-item">
                                <div class="label">纵向z/μm</div>
                                <input type="text" class="pui-input" placeholder="纵向z" v-model="deviceManager.photGrid.zLength" clearAble full/>
                            </div>
                        </div>
                        <div class="title">计算参数设置:</div>
                        <div class="area-item">
                            <div class="form-item">
                                <div class="label">传输波长/μm</div>
                                <input type="text" class="pui-input" placeholder="传输波长(μm)" v-model="deviceManager.photGrid.waveLength" clearAble full/>
                            </div>
                            <div class="form-item">
                                <div class="label">空间步长/μm</div>
                                <input type="text" class="pui-input" placeholder="空间步长(μm)" v-model="deviceManager.photGrid.gridSpacing" clearAble full/>
                            </div>
                            <div class="form-item">
                                <div class="label">计算时长</div>
                                <input type="text" class="pui-input" placeholder="计算时长" v-model="deviceManager.photGrid.totalTime" clearAble full/>
                            </div>
                        </div>
                        <div class="area-item">
                            <div class="form-item">
                                <div class="label">PML边界宽度x/μm</div>
                                <input type="text" class="pui-input" placeholder="PML边界宽度x" v-model="deviceManager.photGrid.pmlWidthX" clearAble full/>
                            </div>
                            <div class="form-item">
                                <div class="label">PML边界宽度y/μm</div>
                                <input type="text" class="pui-input" placeholder="PML边界宽度y" v-model="deviceManager.photGrid.pmlWidthY" clearAble full/>
                            </div>
                            <div class="form-item">
                                <div class="label">PML边界宽度z/μm</div>
                                <input type="text" class="pui-input" placeholder="PML边界宽度z" v-model="deviceManager.photGrid.pmlWidthZ" clearAble full/>
                            </div>
                        </div>
                        <div class="title">波导环境设置:</div>
                        <div class="area-item">
                            <div class="form-item">
                                <div class="label">环境材料</div>
                                <pui-selector :dataList="componentRef.materialList" v-model="deviceManager.photGrid.env_materials"></pui-selector>
                            </div>
                            <div class="form-item">
                                <div class="label">相对介电常数(实部/虚部)</div>
                                <div class="content">
                                    <input type="text" class="pui-input" placeholder="实部" v-model="deviceManager.photGrid.permittivity_real" clearAble/>
                                    <input type="text" class="pui-input" placeholder="虚部" v-model="deviceManager.photGrid.permittivity_imag" clearAble/>
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="label">相对磁导率</div>
                                <input type="text" class="pui-input" placeholder="环境相对磁导率" v-model="deviceManager.photGrid.permeability" clearAble full/>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template #footer>
                <pui-button @click="resetPhotGrid">重置默认值</pui-button>
                <pui-button @click="submit" type="primary">确定</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { deepClone, fsToS, umToM, mToUm, sToFs } from '@/utils'
export default defineComponent({
    name: 'NewGraph'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, watch } from 'vue'
import { deviceManager } from '@/services/phot_client/device'
import { PhotGrid } from '@/common/types/phot_types'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: '仿真区域设置'
    },
    animate: {
        type: String,
        default: 'fade'
    },
})
const emit = defineEmits({
    onClose: (val: any) => {},
})
const componentRef = reactive({
    dialogVisible: false,
    photGrid: {},
    emulationType: '1',
    emulationTypeList: [
        {
            value: '2D',
            label: '2D仿真'
        },
        {
            value: '3D',
            label: '3D仿真'
        },
    ],
    materialList: [
        {
            label: '请选择',
            value: ''
        }
    ]
}) as any
const init = async () => {
    componentRef.photGrid = deepClone(deviceManager.photGrid)
    deviceManager.photGrid.xLength = mToUm(deviceManager.photGrid.xLength)
    deviceManager.photGrid.yLength = mToUm(deviceManager.photGrid.yLength)
    deviceManager.photGrid.zLength = mToUm(deviceManager.photGrid.zLength)
    deviceManager.photGrid.pmlWidthX = mToUm(deviceManager.photGrid.pmlWidthX)
    deviceManager.photGrid.pmlWidthY = mToUm(deviceManager.photGrid.pmlWidthY)
    deviceManager.photGrid.pmlWidthZ = mToUm(deviceManager.photGrid.pmlWidthZ)
    deviceManager.photGrid.waveLength = mToUm(deviceManager.photGrid.waveLength)
    deviceManager.photGrid.gridSpacing = mToUm(deviceManager.photGrid.gridSpacing)
    deviceManager.photGrid.totalTime = sToFs(deviceManager.photGrid.totalTime)
    componentRef.dialogVisible = true
    console.log(componentRef.photGrid )
    componentRef.materialList = [
        {
            label: '请选择',
            value: ''
        }
    ]
    const materialList = await deviceManager.getMaterials()
    materialList.map((material: any) => {
        componentRef.materialList.push({
            material,
            label: material.name,
            value: material.name,
        })
    })
}
const closeDialog = () => {
    componentRef.dialogVisible = false
    emit('onClose', '关闭')
}

const submit = async () => {
    await updateGrid()
}
const resetPhotGrid = () => {
    for(let prop in componentRef.photGrid) {
        deviceManager.photGrid[prop] = componentRef.photGrid[prop]
    }
}

const updateGrid = async () => {
    try {
        proxy.$loading.open('正在更新仿真工程...')
        await deviceManager.updateGrid(deviceManager.photGrid)
        deviceManager.photGrid.xLength = umToM(deviceManager.photGrid.xLength)
        deviceManager.photGrid.yLength = umToM(deviceManager.photGrid.yLength)
        deviceManager.photGrid.zLength = umToM(deviceManager.photGrid.zLength)
        deviceManager.photGrid.pmlWidthX = umToM(deviceManager.photGrid.pmlWidthX)
        deviceManager.photGrid.pmlWidthY = umToM(deviceManager.photGrid.pmlWidthY)
        deviceManager.photGrid.pmlWidthZ = umToM(deviceManager.photGrid.pmlWidthZ)
        deviceManager.photGrid.waveLength = umToM(deviceManager.photGrid.waveLength)
        deviceManager.photGrid.gridSpacing = umToM(deviceManager.photGrid.gridSpacing)
        deviceManager.photGrid.totalTime = fsToS(deviceManager.photGrid.totalTime)
        let axisIndex = deviceManager.taskStatus.get(deviceManager.photGridId) === 2 ? [-1,-1,-1] : [0,0,0]
        const figures = await deviceManager.getFigures(axisIndex)
        deviceManager.figures.set(deviceManager.photGridId, figures)
        proxy.$parent.$refs[`FiguresViewRef-${deviceManager.photGridId}`][0].init()
        componentRef.photGrid = deepClone(deviceManager.photGrid)
        proxy.$loading.close()
        proxy.$toast({
            type: 'success',
            value: '更新成功'
        })
        closeDialog()
    } catch (err: any) {
        proxy.$loading.close()
        proxy.$toast({
            type: 'error',
            value: '更新失败'
        })
    }
}
defineExpose({
    init
})
</script>
<style lang="scss">
@import '../fileControl/fileStyle.scss';
</style>